<template>
  <div class="h-100 w-100 indexMap">
    <div class="left_panel"  ref="leftPanel" >
          <div id="boxPanel" class="box-panel" ref="boxPanel">
             <el-row class="row">
               <el-col :span="6">
                 <div class="text-panel">
                     <!-- <el-col :span="6" class="text-right">
                       <img src="../../public/images/eyes.png"   alt="">
                     </el-col> -->
                     <el-col :span="24"  class="text-left">
                       <div class="text">值守(天)</div>
                       <div class="num">425</div>
                     </el-col>
                 </div>
               </el-col>
               <el-col :span="6">
                 <div class="text-panel">
                   <!-- <el-col :span="6" class="text-right">
                     <img src="../../public/images/eyes.png"   alt="">
                   </el-col> -->
                   <el-col :span="24"  class="text-left">
                     <div class="text">日报</div>
                     <div class="num">425</div>
                   </el-col>


                 </div>
               </el-col>
               <el-col :span="6">
                 <div class="text-panel">
                   <!-- <el-col :span="6" class="text-right">
                     <img src="../../public/images/eyes.png"   alt="">
                   </el-col> -->
                   <el-col :span="24"  class="text-left">
                     <div class="text">周报</div>
                     <div class="num">61</div>
                   </el-col>
                 </div>
               </el-col>
               <el-col :span="6">
                 <div class="text-panel">
                   <!-- <el-col :span="6" class="text-right">
                     <img src="../../public/images/eyes.png"   alt="">
                   </el-col> -->
                   <el-col :span="24"  class="text-left">
                     <div class="text">月报</div>
                     <div class="num">14</div>
                   </el-col>
                 </div>
               </el-col>
             </el-row>
             <el-row  class="row">
              <el-col :span="6">
                <div class="text-panel">
                  <!-- <el-col :span="6" class="text-right">
                    <img src="../../public/images/eyes.png"   alt="">
                  </el-col> -->
                  <el-col :span="24"  class="text-left">
                    <div class="text">抽查企业</div>
                    <div class="num">1540</div>
                  </el-col>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="text-panel">
                  <!-- <el-col :span="6" class="text-right">
                    <img src="../../public/images/eyes.png"   alt="">
                  </el-col> -->
                  <el-col :span="24"  class="text-left">
                    <div class="text">重大较大风险</div>
                    <div class="num">510</div>
                  </el-col>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="text-panel">
                  <!-- <el-col :span="6" class="text-right">
                    <img src="../../public/images/eyes.png"   alt="">
                  </el-col> -->
                  <el-col :span="24"  class="text-left">
                    <div class="text">排查异常</div>
                    <div class="num">13530</div>
                  </el-col>

                </div>
              </el-col>
              <el-col :span="6">
                <div class="text-panel">
                  <!-- <el-col :span="6" class="text-right">
                    <img src="../../public/images/eyes.png"   alt="">
                  </el-col> -->
                  <el-col :span="24"  class="text-left">
                    <div class="text">报备异常</div>
                    <div class="num">3210</div>
                  </el-col>
                </div>
              </el-col>
            </el-row>
          </div>
          <el-row  class="echart-panel" >
            <div class="panel-title"><b></b>预警趋势<i></i></div>
            <div class="panel-content ">
              <vae-echarts :options="option"  height="100%"  style="height: 100%"></vae-echarts>
            </div>
          </el-row>
    </div>
    <div class="mid_panel">
        <div class="mapPanel">
           <div class=" w-20 text-panel bg1">
              <el-col :span="6" class="text-right">
                <img src="../../public/images/gzsj.png"   alt="">
              </el-col>
              <el-col :span="18"  class="text-left">
                <div class="text">感知预警</div>
                <div class="num">22</div>
              </el-col>
           </div>
            <div class=" w-20 text-panel bg1">
              <el-col :span="6" class="text-right">
                <img src="../../public/images/sgzz.png"   alt="">
              </el-col>
              <el-col :span="18"  class="text-left">
                <div class="text">事故追踪</div>
                <div class="num">9</div>
              </el-col>
           </div>
            <!-- <div class="w-20  text-panel bg2">
              <el-col :span="6" class="text-right">
                <img src="../../public/images/lan.png"   alt="">
              </el-col>
              <el-col :span="18"  class="text-left">
                <div class="text">态势监测</div>
                <div class="num">66</div>
              </el-col>
            </div> -->
            <div class="w-20 text-panel bg3">
              <el-col :span="6" class="text-right">
                <img src="../../public/images/jdtj.png"   alt="">
              </el-col>
              <el-col :span="18"  class="text-left">
                <div class="text">极端天气</div>
                <div class="num">10</div>
              </el-col>

            </div>
            <div class="w-20 text-panel bg4">
              <el-col :span="6" class="text-right">
                <img src="../../public/images/cjdy.png"   alt="">
              </el-col>
              <el-col :span="18"  class="text-left">
                <div class="text">地压冲击</div>
                <div class="num">2</div>
              </el-col>

            </div>
          <div class="w-20 text-panel bg4">
            <el-col :span="6" class="text-right">
              <img src="../../public/images/zhfx.png"   alt="">
            </el-col>
            <el-col :span="18"  class="text-left">
              <div class="text">综合分析</div>
              <div class="num">8</div>
            </el-col>

          </div>
        </div>
    </div>
    <div class="right_panel" style="width: calc(18vw - 1.5vh);position: relative">
        <div class="panleBG_title">预警构成</div>
         <div style="height: calc(50%)">
          <vae-echarts :options="rightPie"  height="100%"  style="height: 100%"></vae-echarts>
        </div>
         <div class="panel-title"><b></b>预警分布top5 <i></i></div>
         <div class="panel-content"  >
        <div style="height: calc(100%)">
          <vae-echarts :options="rightPie1"  height="100%"  style="height: 100%"></vae-echarts>
        </div>
      </div>
    </div>
    <div class="right_panel"  style="width: calc(12vw - 1.5vh);position: relative">
        <div class="panleBG_title">实时预警</div>

        <div class="content-panel">
            <!-- <vue-seamless-scroll :data="data" class="warp"  :class-option="classOption"> -->
                <div class="panleBG_panel" v-for="(item,index) in data" :key="index">
                  <div class="ling"  >
                    <img  :src="iconMap['04']" alt="">
                  </div>
                  <div style="width:8vw;">
                      <div class="text">预警类型:{{item.typeName}}</div>
                      <div class="text" style="margin:0.3vh 0">位置:{{item.loc}}</div>
                      <div class="num">预警信息:{{item.info}}</div>
                  </div>
                </div>
            <!-- </vue-seamless-scroll> -->
        </div>
    </div>
  </div>
</template>

<script>
const pageName = "views_index";
import vueSeamlessScroll from 'vue-seamless-scroll'
import ling1 from "../../public/images/ling1.png"
import ling2 from "../../public/images/ling2.png"
import ling3 from "../../public/images/ling2.png"
export default {
  name: pageName,
  components: {
        vueSeamlessScroll
  },
  data() {
    return {
        //滚动条速度
        classOption: {
            step: 0.2
        },
      option:{},
      rightPie:{ },
      rightPie1:{ },
      rightBar:{},
      data:[],
      levelMap:{
          "01":"重大风险 ",
          "02":"较大风险",
          "03":"一般风险",
          "04":"低分险",
      },
      levelColor:{
        "01":"#db2d2d ",
        "02":"#fc7500",
        "03":"#e3ca21",
        "04":"#00b4ff",
      },
      typeMap:{
          // "ts":'态势预警',//态势预警
          "sg":'事故预警',//事故预警
          "zh":'灾害',//灾害
          "ws":'瓦斯预警',//瓦斯预警
          "jd":'瓦斯预警',//瓦斯预警
      },
      iconMap:{
        "01":ling1,
        "02":ling2,
        "03":ling2,
        "04":ling3,
      }
    }
  },
  created(){
    this.initRightPie();
    this.initRightPie1();
    this.initRightBar();
    this.initData();
    this.getData();
  },
  methods:{
    initData(){
      this.request({
        url: "data/getyjqs",
        method: "get"
      }).then(({data})=> {
        console.log(data);
        let legend=[""];
        let colorArr=["#BB00E0","#D5AE2B","#24B011","#2DFFFF","#F6D06F"];
        data.typeList.forEach((v,index)=>{
          legend.push({
            name: v,
            icon: 'rect',
          })
        })
        this.option={
          color:colorArr,
          tooltip : {
            trigger: 'axis'
          },
          legend: {
            itemHeight: 16,
            itemWidth: 16,
            data:legend,

            textStyle:{
              color:"#fff"
            }
          },
          grid: {
            top: 'middle',
            left: '3%',
            right: '4%',
            bottom: '3%',
            height: '80%',
            containLabel: true
          },
          calculable : true,
          xAxis : [
            {
              type : 'category',
              boundaryGap : true,
              data : data.dateList,
              axisTick: {
                show: true //隐藏X轴刻度
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#fff"
                }

              },
              axisLabel: {
                  interval:0, //强制显示文字
                  rotate:20,
                  show: true,
                  textStyle: {
                   color: "#ebf8ac" //X轴文字颜色
                  }
              },
            }
          ],
          yAxis : [
            {
              type : 'value',
              nameTextStyle: {
                color: "#ebf8ac"
              },

              axisLine: {
                show:false,
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#ebf8ac"
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed',
                  color: '#DDD'
                }
              },
            }
          ],
          series : [
            {
              name:"市场政策",
              type:'line',
              min:10,
              max:40,
              data:data.data1,
              symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
              showAllSymbol: true,
              symbolSize: 0,
              lineStyle: {
                normal: {
                  width: 5,
                  color: {
                    type: 'linear',
                    colorStops: [{
                      offset: 0,
                      color: '#BB00E0' // 0% 处的颜色
                    },
                      {
                        offset: 0.4,
                        color: '#BB00E0' // 100% 处的颜色
                      }, {
                        offset: 1,
                        color: '#BB00E0' // 100% 处的颜色
                      }
                    ],
                    globalCoord: false // 缺省为 false
                  },
                  shadowColor: 'rgba(120,26,133, 0.5)',
                  shadowBlur: 2,
                  shadowOffsetY: 5,
                  shadowOffsetX: 5,
                }
              },
              smooth: true,
            },
            {
              name:"灾害预警",
              type:'line',
              min:10,
              max:40,
              data:data.data2,
              symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
              showAllSymbol: true,
              symbolSize: 0,
              lineStyle: {
                normal: {
                  width: 5,
                  color: {
                    type: 'linear',

                    colorStops: [{
                      offset: 0,
                      color: '#D5AE2B' // 0% 处的颜色
                    },
                      {
                        offset: 0.4,
                        color: '#D5AE2B' // 100% 处的颜色
                      }, {
                        offset: 1,
                        color: '#D5AE2B' // 100% 处的颜色
                      }
                    ],
                    globalCoord: false // 缺省为 false
                  },
                  shadowColor: 'rgba(185, 146, 7, 0.5)',
                  shadowBlur: 2,
                  shadowOffsetY: 5,
                  shadowOffsetX: 5,
                }
              },
              smooth: true,

            },
            {
              name: "极端天气预警",
              type:'line',
              min:10,
              max:40,
              data:data.data3,
              symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
              showAllSymbol: true,
              symbolSize: 0,
              lineStyle: {
                normal: {
                  width: 5,
                  color: {
                    type: 'linear',

                    colorStops: [{
                      offset: 0,
                      color: '#24B011' // 0% 处的颜色
                    },
                      {
                        offset: 0.4,
                        color: '#24B011' // 100% 处的颜色
                      }, {
                        offset: 1,
                        color: '#24B011' // 100% 处的颜色
                      }
                    ],
                    globalCoord: false // 缺省为 false
                  },
                  shadowColor: 'rgba(21, 142, 0, 0.5)',
                  shadowBlur: 2,
                  shadowOffsetY: 5,
                  shadowOffsetX: 5,
                }
              },
              smooth: true,

            },
            {
              name: "事故预警",
              type:'line',
              min:10,
              max:40,
              data:data.data4,
              symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
              showAllSymbol: true,
              symbolSize: 0,
              lineStyle: {
                normal: {
                  width: 5,
                  color: {
                    type: 'linear',

                    colorStops: [{
                      offset: 0,
                      color: '#2DFFFF' // 0% 处的颜色
                    },
                      {
                        offset: 0.4,
                        color: '#2DFFFF' // 100% 处的颜色
                      }, {
                        offset: 1,
                        color: '#2DFFFF' // 100% 处的颜色
                      }
                    ],
                    globalCoord: false // 缺省为 false
                  },
                  shadowColor: 'rgba(28, 110, 210, 0.5)',
                  shadowBlur: 2,
                  shadowOffsetY: 5,
                  shadowOffsetX: 5,
                }
              },
              smooth: true,

            },
            {
              name:  "瓦斯综合预警",
              type:'line',
              min:10,
              max:40,
              data:data.data5,
              symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
              showAllSymbol: true,
              symbolSize: 0,
              lineStyle: {
                normal: {
                  width: 5,
                  color: {
                    type: 'linear',

                    colorStops: [{
                      offset: 0,
                      color: '#F6D06F' // 0% 处的颜色
                    },
                      {
                        offset: 0.4,
                        color: '#F9A589' // 100% 处的颜色
                      }, {
                        offset: 1,
                        color: '#F9A589' // 100% 处的颜色
                      }
                    ],
                    globalCoord: false // 缺省为 false
                  },
                  shadowColor: 'rgba(249,165,137, 0.5)',
                  shadowBlur: 2,
                  shadowOffsetY: 5,
                  shadowOffsetX: 5,
                }
              },
              smooth: true,

            },
          ]
        }
      });
    },
    initRightBar(){
      var charts = { // 按顺序排列从大到小
        cityList: ['文化路', '京广路', '15号点', '16号点', '24号点','16号点', '24号点'],
        cityData: [7500, 6200, 5700, 4200, 3500,2500,1200]
      }
      var top10CityList = charts.cityList
      var top10CityData = charts.cityData
      var color = ['#ff9500', '#02d8f9', '#027fff']
      var color1 = ['#ffb349', '#70e9fc', '#4aa4ff']

      let lineY = []
      let lineT = []
      for (var i = 0; i < charts.cityList.length; i++) {
        var x = i
        if (x > 1) {
          x = 2
        }
        var data = {
          name: charts.cityList[i],
          color: color[x],
          value: top10CityData[i],
          barGap: '-100%',
          itemStyle: {
            normal: {
              show: true,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: color[x]
              }, {
                offset: 1,
                color: color1[x]
              }], false),
              barBorderRadius: 10
            },
            emphasis: {
              shadowBlur: 15,
              shadowColor: 'rgba(0, 0, 0, 0.1)'
            }
          }
        }
        var data1 = {
          value: top10CityData[0],
          itemStyle: {
            color: '#001235',
            barBorderRadius: 10
          }
        }
        lineY.push(data)
        lineT.push(data1)
      }

      this.rightBar= {
        title: {
          show: false
        },
        tooltip: {
          trigger: 'item',
          formatter: (p) => {
            if (p.seriesName === 'total') {
              return ''
            }
            return `${p.name}<br/>${p.value}`
          }
        },
        grid: {
          borderWidth: 0,
          top: '10%',
          left: '5%',
          right: '15%',
          bottom: '3%'
        },
        color: color,
        yAxis: [{
          type: 'category',
          inverse: true,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false,
            inside: false
          },
          data: top10CityList
        }, {
          type: 'category',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            inside: false,
            verticalAlign: 'bottom',
            lineHeight: '40',
            textStyle: {
              color: '#b3ccf8',
              fontSize: '14',
              fontFamily: 'PingFangSC-Regular'
            },
            formatter: function(val) {
              return `${val}`
            }
          },
          splitArea: {
            show: false
          },
          splitLine: {
            show: false
          },
          data: top10CityData
        }],
        xAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        series: [{
          name: 'total',
          type: 'bar',
          zlevel: 1,
          barGap: '-100%',
          barWidth: '10px',
          data: lineT,
          legendHoverLink: false
        }, {
          name: 'bar',
          type: 'bar',
          zlevel: 2,
          barWidth: '10px',
          data: lineY,
          label: {
            normal: {
              color: '#b3ccf8',
              show: true,
              position: [0, '-24px'],
              textStyle: {
                fontSize: 16
              },
              formatter: function(a) {
                let num = ''
                let str = ''
                if (a.dataIndex + 1 < 10) {
                  num = 'NO.' + (a.dataIndex + 1);
                } else {
                  num = (a.dataIndex + 1);
                }
                if (a.dataIndex === 0) {
                  str = `{color1|${num}} {color4|${a.name}}`
                } else if (a.dataIndex === 1) {
                  str = `{color2|${num}} {color4|${a.name}}`
                } else {
                  str = `{color3|${num}} {color4|${a.name}}`
                }
                return str  ;
              },
              rich: {
                color1: {
                  color: '#ff9500',
                  fontWeight: 700
                },
                color2: {
                  color: '#02d8f9',
                  fontWeight: 700
                },
                color3: {
                  color: '#027fff',
                  fontWeight: 700
                },
                color4: {
                  color: '#e5eaff'
                }
              }
            }
          }
        }],
      }
    },
    initRightPie(){
      this.rightPie={
        legend:{
          data:["感知预警","事故追踪","极端天气耦合预警","地压冲击综合预警","综合分析耦合预警"],
          icon: "circle",
          textStyle:{
            color:"#fff",
            fontSize:12
          }

        },
        color:['#1f6efb','#fda728','#fa242f','#29c436','#206efb'],
        tooltip : {
          trigger : 'item',
          formatter : "{b}:{c}</br> ({d}%)"
        },
        series: [
          {
            type: 'pie',
            zlevel: 1,
            silent: true,
            radius: ['83%', '84%'],
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this._pie()
          },
          {
            type: 'pie',
            zlevel: 2,
            silent: true,
            radius: ['62%', '63%'],
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this._pie()
          },
          {
            type: 'pie',
            zlevel: 3,
            silent: true,
            radius: ['41%', '42%'],
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this._pie()
          },
          {
            type: 'pie',
            zlevel: 4,
            radius: ['20%', '54%'],
            center: ['50%', '50%'],
            roseType: 'area',
            data : [
              {
                name : '感知预警',
                value : '370',
                itemStyle : {
                  normal : {
                    color: "rgba(54, 168, 251, 1)",
                    borderColor: "rgba(54, 168, 251, 1)",
                    borderWidth: 1
                  }
                }
              },
              {
                name : '事故追踪',
                value : '210',
                itemStyle : {
                  normal : {
                    color: "rgba(254, 175, 31,1)",
                    borderColor: "rgba(254, 175, 31, 1)",
                    borderWidth: 1
                  }
                }
              },
              // {
              //   name : '态势监测',
              //   value : '66',
              //   itemStyle : {
              //     normal : {
              //       color: "rgba(244, 255, 77, 0.5)",
              //       borderColor: "rgba(244, 255, 77, 1)",
              //       borderWidth: 1
              //     }
              //   }
              // },
              {
                name : '极端天气耦合预警',
                value : '114',
                itemStyle : {
                  normal : {
                      color: "rgba(250, 36, 47, 1)",
                      borderColor: "rgba(250, 36, 47,  1)",
                    borderWidth: 1
                  }
                }
              },
              {
                name : '地压冲击综合预警',
                value : '115',
                itemStyle : {
                  normal : {
                    color: "rgba(46, 198, 58, 1)",
                    borderColor: "rgba(46, 198, 58, 1)",
                    borderWidth: 1
                  }
                },
                labelLine: {
                  normal: {
                    length : 3,
                    length1 : 2,
                    lineStyle : {
                      color: '#88A8D6'
                    }
                  }
                }
              },
               {
                name : '综合分析耦合预警',
                value : '135',
                itemStyle : {
                  normal : {
                    color: "rgba(43, 166, 254, 1)",
                    borderColor: "rgb(43, 166, 254)",
                    borderWidth: 1
                  }
                },
                labelLine: {
                  normal: {
                    length : 3,
                    length1 : 2,
                    lineStyle : {
                      color: "rgb(43, 166, 254)"
                    }
                  }
                }
              },

            ],
            label: {
              normal: {
                formatter: '{name|{b}}\n{c}\n{t|{d}%}',
                minMargin: 5,
                edgeDistance: 10,
                lineHeight: 15,
                rich: {
                  time: {
                    fontSize: 14,
                    color: '#999'
                  }
                }
              },
            },
            labelLine: {
              normal: {
                length : 10,
                length1 : 2,
                lineStyle : {
                  color: '#88A8D6'
                }
              }
            }
          }
        ]
      };
    },
    initRightPie1(){
      var scaleData = [
          {
        'name': '陕西',
        'value': 100
      },
        {
          'name': '贵州',
          'value': 50
        },
        {
          'name': '山西',
          'value': 48
        },
        {
          'name': '河北',
          'value': 46
        },
        {
          'name': '河南',
          'value': 30
        },


      ];
      var rich = {
        white: {
          color: '#fff',
          align: 'center',
          fontWeight:'bold',
          padding: [3, 0]
        }
      };
      var placeHolderStyle = {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          color: 'rgba(0, 0, 0, 0)',
          borderColor: 'rgba(0, 0, 0, 0)',
          borderWidth: 0
        }
      };
      var data = [];
      var color1 = ['rgb(255, 153, 153)', 'rgb(255, 176, 63)', 'rgb(61, 186, 45)', 'rgb(43, 166, 254)','rgb(255,222,0)','rgb(255,0,0)'];

      for (var i = 0; i < scaleData.length; i++) {
        data.push({
          value: scaleData[i].value,
          name: scaleData[i].name,
          itemStyle: {
            normal: {
              borderWidth: 4,
              borderColor:color1[i],
              shadowColor: color1[i],
              color: color1[i],
              opacity:1,
            }
          }
        }, {
          value: 2,
          name: '',
          itemStyle: placeHolderStyle
        });
      }
      var seriesObj = [{
        name: '',
        type: 'pie',
        clockWise: false,
        radius: ["40%", "80%"],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'inner',
              fontWeight:'bold',
              formatter: function(params) {
                var percent = 0;
                var total = 0;
                for (var i = 0; i < scaleData.length; i++) {
                  total += scaleData[i].value;
                }
                percent = ((params.value / total) * 100).toFixed(0);
                if(params.name !== '') {
                  return params.name + '\n{white|' + '占比' + percent + '%}';
                }else {
                  return '';
                }
              },
              rich: rich
            },
            labelLine: {
              show: false,
            }
          }
        },
        data: data
      }];
      this.rightPie1 = {
        tooltip: {
          show: false
        },
        legend: {
          show: false
        },
        toolbox: {
          show: false
        },
        series: seriesObj
      }
    },
    _pie() {
      let dataArr = [];
      for (var i = 0; i < 100; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 25,
            itemStyle: {
              normal: {
                color: "rgb(3,56,92)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)"
              }
            }
          })
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 20,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)"
              }
            }
          })
        }

      }
      return dataArr

    },
    getData(){
      this.request({
        url: "data/getData/1.10",
        method: "get"
      }).then(({data})=> {
          this.data=data;
      })
    },
  },
  mounted() {

  }
}
</script>
<style scoped lang="less">
::-webkit-scrollbar {
    width: 4px;
    height: 10px;
    background-color: transparent;
}
 ::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px transparent;
    border-radius: 10px;
    background-color: #00fefe!important;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb {
    background-color: #ddd;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px transparent;
    border-radius: 10px;
}
.full-h{
  height: 100%;
}
.full-w{
  width: 100%;
}
.text-right{
  text-align: right;
}
.text-left{
  text-align: left;
}

.left_panel{
  background: url("../../public/images/panel_bg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  padding: 2vh;
  box-sizing: border-box;
  .box-panel{
    .row{
      height: calc(50%);
    }
    height:calc(20%);
    .text-panel{
      img{
        width: 100%;
      }
      background-position-y: bottom;
      padding-top: 1vh;
      .text{
        color: #40E6FE;
        font-size: 1.1vw;
        padding-bottom: 0.5vh;
        text-align:center;
      }
      .num{
        color: #fff;
        font-size: 3vh;
        font-family: "黑体";
        text-align:center;
        font-weight:bolder;
      }
    }
  }
 .echart-panel{
   height:calc(80%);
   padding: 2vh;
   background: url("../../public/images/bj1.png") no-repeat;
   background-size: 100% 100% !important;
   box-sizing: border-box;
    .panel-title{
      font-size: 1.8vh;
      line-height: 2vh;
      color: #fff;
      text-align:center;
      b{
        display: inline-block;
        width: 2vh;
        height: 2vh;
        background: url("../../public/images/zuo.png") no-repeat;
        background-size: contain;
        vertical-align: middle;
      }
      i{
        display: inline-block;
        width: 2vh;
        height: 2vh;
        background: url("../../public/images/you.png") no-repeat;
        background-size: contain;
        vertical-align: middle;
      }
    }
    .panel-content{
      height: calc(100% - 2vh);
      margin-top: 2vh;
    }
  }

}
.right_panel{
  background: url("../../public/images/md_panel_bg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  background-size: 100% 100%;
  padding: 0 1vh !important;
  padding-top:5vh !important;
  box-sizing: border-box;
  .content-panel{
    height: calc(82vh);
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .panel-title{
    font-size: 1.6vh;
    line-height: 2vh;
    color: #fff;
    text-align:center;
    b{
      display: inline-block;
      width: 2vh;
      height: 2vh;
      background: url("../../public/images/zuo.png") no-repeat;
      background-size: contain;
      vertical-align: middle;
      margin-right: 5px;
    }
    i{
      display: inline-block;
      width: 2vh;
      height: 2vh;
      background: url("../../public/images/you.png") no-repeat;
      background-size: contain;
      vertical-align: middle;
      margin-left: 5px;
    }
  }
  .panel-content{
    height: calc(50% - 8vh);
    margin-top: 2vh;
  }
  .panleBG_panel{
    margin: 0 auto;
    height:14vh ;
    background:url("../../public/images/rightBG.png") no-repeat ;
    background-size: 100% 100%;
    margin-top: 1vh;
    display: flex;
    justify-content: center;
    align-items: center;
    .ling{
      width: 2vw;
      vertical-align: middle;
      text-align: center;
      // height: 100%;
      float: left;
      img{
        // padding-top: 2vh;
        width: 60%;
      }
    }
    .text{
      color: #97caff;
      font-size: 1.4vh;
      // padding-top:0.8vh;
      // line-height: 2vh;
    }
    .num{
      color: #fff;
      font-size: 1.2vh;
      font-family: "黑体";
      line-height: 1.8vh;
      font-weight:bolder;

    }
    .time{
      font-size: 1vh;
      color: #84A9FF;
    }
  }
}
.indexMap{
  .right_panel{
    margin-right: 0 !important;
    box-sizing: border-box;
    padding-top: 5vh;
  }
  .panleBG_title{
    font-size: 1.8vh;
    color: #fff;
    position: relative;
    width: 100%;
    top: -4.4vh;
    text-align: center;
  }
}
.left_panel{
  width:calc(30vw - 2vh)!important;
}
.mid_panel{
  width:calc(40vw)!important;
  .mapPanel{
    display: flex;
    width: calc(100% - 1vw);
    justify-content: center;
    background: url("../../public/images/mapTop.png") no-repeat;
    background-size: 100% 100%;
    align-items: center;
    height: 8vh;
    margin: 0 auto;
    padding:0 0.5vw 1vh 0.5vw;
    .w-20{
      width: 20%;
    }
    .text-panel{
      img{
        width: 60%;
        margin-top:1vh;
      }
      background-position-y: bottom;
      padding-top: 2vh;
      .text{
        font-size: 1.8vh;
        padding-bottom: 0.2vh;
        padding-left: 0.5vw;
        padding-top: 1.2vh;
        color: #40E6FE;
      }
      .num{
        color: #fff;
        font-size: 2.4vh;
        font-family: "黑体";
        padding-left: 0.5vw;
        font-weight:bolder;
      }
    }
  }

}
</style>
